import React from 'react';
import {render} from 'react-dom';
import {Router,Route,IndexRoute,Link,hashHistory} from 'react-router';

class App extends React.Component{
	render(){
		return(
			<div>
				<h1>App</h1>
			</div>
		)
	}
}

class Index extends React.Component{
	render(){
		return(
			<div>
				<h1>我是温神</h1>
				<ul>
					<li><Link to='/page1' activeClassName="active">page1</Link></li>
					<li><Link to='/page2' activeClassName="active">page2</Link></li>
					<li><Link to={{pathname:"/page3/login",query:{username:'张三',password:'李四'}}} activeClassName="active">登录页面</Link></li>
				</ul>
			</div>
		)
	}
}

class Page1 extends React.Component{
	render(){
		return(
			<h1>Page1</h1>
		)
	}
}

class Page2 extends React.Component{
	render(){
		return(
			<h1>page2</h1>
		)
	}
}
class page3 extends React.Component{
	render(){
		return(
			<h1>page3</h1>
		)
	}
}

class Login extends React.Component {
    render() {
        return (
            <p>Login</p>
        )
    }
}

render(
	<Router history={hashHistory}>
		<Route path='' component={Index}>
			<IndexRoute component={Index} />
			<Route path="page1" component={Page1}/>
			<Route path="page2" component={Page2}/>
			<Route path='page3' component={page3}>
				<Route path='login' component={Login}/>
			</Route>
		</Route>
	</Router>,
	document.querySelector('#box')
)
